<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path;
    %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图片分享后台</title>
    <!-- 基本配置文件会先放在前面 -->
    <link rel="stylesheet" type="text/css" href="../resources/package/bootstrap/css/bootstrap.css">
    <%--<link rel="stylesheet" type="text/css" href="../resources/package/bootstrap/css/bootstrap.min.css">--%>
    <link rel="stylesheet" type="text/css" href="../resources/package/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/manager/css/base.css">
    <link rel="stylesheet" type="text/css" href="../resources/manager/css/form.css">
    <link rel="stylesheet" type="text/css" href="../resources/manager/css/keyword.css">
    <link rel="stylesheet" type="text/css" href="../resources/manager/css/nav.css">
    <script type="text/javascript" src="../resources/package/jquery/jquery-3.1.1.min.js"></script>
    <!--jquery.validate-->
    <script type="text/javascript" src="../resources/login/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/package/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/package/layer/layer.js"></script>
    <script>
        $(function () {
            var count = 0;
            $(".myshow").click(function () {
                console.log("1");
                count = (count+1)%2;
                if(count==1){
                    $(".user-nav").css("display","block")
                }else{
                    $(".user-nav").css("display","none")
                }
            });
            $(".deleteKeywordBtn").click(function () {
                let that=$(this);
                layer.confirm('是否确认删除？删除后不能恢复!', {
                    title: "删除确认",
                    btn: ['确认', '取消'] //按钮
                }, function (index) {
                    console.log(that.find("button").attr("value"));
                    layer.close(index);
                    $.ajax({
                        type: "GET",
                        url: "<%=basePath%>/admin/deleteKeyword",
                        data: {
                            id:that.find("button").attr("value"),
                            pn:${pn}
                        },
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        dataType: "text",
                        success: function (data) {
                            console.log(data);
                            window.open("<%=basePath%>/admin/keyword?pn=${pn}","_self");
                        },
                        error: function (data) {
                            console.log(data)
                            layer.msg('删除失败', {
                                time: 500
                            });
                        }
                    });
                }, function (index) {
                    layer.msg('取消了删除', {
                        time: 500
                    });
                });
            });
        });
    </script>
</head>
<body>
<div class="header-wrapper">
    <div class="header">
        <div class="nav-left">
            <i class="glyphicon glyphicon-align-justify"></i>
        </div>
        <div class="nav-middle">
            <div class="logoInfo">
                <a class="logo">图片分享后台</a>
            </div>
        </div>
        <div class="nav-right">
            <!--fontawesome字体图标-->
            <a class="myshow"><i class="glyphicon glyphicon-user"></i></a>
        </div>
        <!--<a>账户</a>-->
        <div class="user-nav" >
            <div class="triangle"></div>
            <div class="triangle-shadow"></div>
            <div class="user-nav-wrapper" style="background-color: #010001;">
                <div class="user-info">
                    <div class="user-img">
                        <i class="glyphicon glyphicon-user" style="color: white"></i>
                    </div>
                    <div class="" style="color: #ffffff">${currentAdmin.account}</div>
                </div>
                <div class="user-item">
                    <a class="" style="color: #ffffff">个人资料</a>
                </div>
                <div class="user-item">
                    <a  href="<%=basePath%>/user/updatepassword?isAdmin=true" style="color: #ffffff">修改密码</a>
                </div>
                <div class="user-item">
                    <a href="<%=basePath%>/admin/addAdmin" style="color: #ffffff">添加管理员</a>
                </div>
                <div class="user-item">
                    <a  href="<%=basePath%>/admin/logout" style="color: #ffffff">退出</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content-wrapper">
    <div class="left-model">
        <div class="left-model-header">
            <a class="model-title-left">图片分享</a>
            <a class="model-title-right"><i class="fa fa-angle-right"></i></a>
        </div>
        <div class="left-model-middle">
            <a class="left-model-item">
                <i class="icon glyphicon glyphicon-home"></i>
                <span class="content">首页</span>
            </a>
        </div>
        <div class="left-model-bottom">
            <div class="info">图片分享程序</div>
            <div class="info"><a>隐私政策 </a><a> 服务条款</a></div>
            <div class="info"><a>©2017 易拓工作室</a></div>
        </div>
    </div>
    <div class="left">
        <ul class="left-header">
            <li class="left-item">
                <a class="content left-item-height" href="<%=basePath%>/admin/adminIndex"> <i class="icon glyphicon glyphicon-home"></i>首页</a>
            </li>
            <li class="left-item">
                <a class="content left-item-height"> <i class="icon glyphicon glyphicon-user"></i>用户管理<i
                        class="icon-right glyphicon glyphicon-chevron-down"></i></a>
                <ul class="twoRank">
                    <li>
                        <a class="left-item-height twoRank-a" href="<%=basePath%>/admin/manageUser?pn=1">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            用户操作
                        </a>
                    </li>
                    <li class="twoRank-li">
                        <a class="left-item-height twoRank-a" href="<%=basePath%>/admin/addAdmin">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            添加管理员
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-item">
                <a class="content left-item-height"> <i class="icon glyphicon glyphicon-bold"></i>关键字管理<i
                        class="icon-right glyphicon glyphicon-chevron-down"></i></a>
                <ul class="twoRank">
                    <li>
                        <a class="left-item-height twoRank-a selectTwoRank" href="<%=basePath%>/admin/keyword?pn=1">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            关键字操作
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-item">
                <a class="content left-item-height"> <i class="icon glyphicon glyphicon-share-alt"></i>举报审核<i
                        class="icon-right glyphicon glyphicon-chevron-down"></i></a>
                <ul class="twoRank">
                    <li>
                        <a class="left-item-height twoRank-a" href="<%=basePath%>/admin/examineList?pn=1&select=0">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            审核列表
                        </a>
                    </li>
                    <li class="twoRank-li">
                        <a class="left-item-height twoRank-a" href="<%=basePath%>/admin/examineList?pn=1&select=-1">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            待审核列表
                        </a>
                    </li>
                    <li class="twoRank-li">
                        <a class="left-item-height twoRank-a" href="<%=basePath%>/admin/examineList?pn=1&select=1">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            已审核列表
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-item">
                <a class="content left-item-height"> <i class="icon glyphicon glyphicon-list"></i>系统公告<i
                        class="icon-right glyphicon glyphicon-chevron-down"></i></a>
                <ul class="twoRank">
                    <li>
                        <a class="left-item-height twoRank-a" href="<%=basePath%>/admin/info?pn=1">
                            <i class="icon glyphicon glyphicon-chevron-right"></i>
                            公告管理
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-item setting">
                <a class="content left-item-height"><i class="icon glyphicon glyphicon-certificate"></i>设置</a>
            </li>
        </ul>
    </div>
    <div class="right">
        <div class="right-inner">
            <div class=col-md-12" id="middle-right-content">
                <div class="middle-right-header">
                    <a href="<%=basePath%>/admin/adminIndex"><span>首页  / </span></a>
                    <a href="<%=basePath%>/admin/keyword?pn=1"><span>关键字操作</span></a>
                </div>
                <div class="search form-group">
                    <%--<span class="addMoreKeyword">批量添加<i class="glyphicon glyphicon-plus"></i></span>--%>
                    <span class="addKeyword" data-toggle="modal" data-target="#addKeywordModal">添加<i class="glyphicon glyphicon-plus"></i></span>
                    <form class="InputForm" action="<%=basePath%>/admin/searchKeyword?pn=1" method="post">
                        <input class="searchInput form-control" placeholder="请输入搜索内容" name="searchKeywordValue" value=${searchKeywordValue}>
                        <i class="clearCont glyphicon glyphicon-remove-circle" title="清空"></i>
                        <button class="btn btn-search searchKeywordBtn">
                            <i class="glyphicon glyphicon-search " title="搜索"></i>
                        </button>
                    </form>
                </div>


                <c:if test="${not empty addKeywordMessage}">
                    <script>
                        $(function () {
                            $('#addKeywordModal').modal({
                                keyboard: true
                            })
                        });
                    </script>
                </c:if>
                <!-- 添加关键字模态框（Modal） -->
                <div class="modal fade" id="addKeywordModal" tabindex="-1" role="dialog" aria-labelledby="keywordLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="background-color: #afd9ee">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="keywordLabel">添加关键字</h4>
                            </div>
                            <form class="form-horizontal" id="addNewKeyword_form"
                                  action="<%=basePath%>/admin/addKeyword" method="post">
                                <div class="modal-body">
                                    <%--<form class="form-horizontal" id="addNewKeyword_form">--%>
                                    <input type="hidden" name="pn" value="${pn}">
                                    <div class="form-group">
                                        <label for="inputKeyword" class="col-sm-3 control-label">关键字</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control required" id="inputKeyword"
                                                   name="keyword" placeholder="关键字">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputKwType" class="col-sm-3 control-label">关键字类型</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control required" id="inputKwType"
                                                   name="kwType" placeholder="关键字类型">
                                        </div>
                                    </div>
                                    <%--</form>--%>
                                </div>
                                <div class="modal-footer">
                                    <label class="addKeywordException">${addKeywordMessage}</label>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary addKeywordSubmit">提交</button>
                                </div>
                            </form>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>


                <table class="table table-striped table-bordered table-hover">
                    <tbody class="tbody" id="Tbody">
                    <tr>
                        <td><strong>编号</strong></td>
                        <td><strong>关键字</strong></td>
                        <td><strong>类型</strong></td>
                        <td><strong>添加时间</strong></td>
                        <td><strong>操作</strong></td>
                    </tr>
                    <c:set var="pages" value="${pages}"/>
                    <c:set var="pn" value="${pn}"/>
                    <c:set var="pnT" value="${pn}"/>
                    <c:set var="count" value="${(pn-1)*10}"/>
                    <c:choose>
                        <c:when test="${pn%3==0}">
                            <c:set var="pn" value="${pn-2-pn%3}"/>
                        </c:when>
                        <c:otherwise>
                            <c:set var="pn" value="${1+pn-pn%3}"/>
                        </c:otherwise>
                    </c:choose>
                    <c:forEach var="kw" items="${keywordList}">
                        <c:set var="count" value="${count+1}"/>
                        <tr>
                            <td>${count}</td>
                            <td>${kw.keyword}</td>
                            <td>${kw.kwType}</td>
                            <td> <fmt:formatDate value="${kw.createTime}" pattern="yyyy-MM-dd hh:mm:ss" type="date" dateStyle="long"/></td>
                            <td>
                                <%--<%=basePath%>/admin/deleteKeyword?id=${kw.id}&pn=${pn}--%>
                                <a  class="deleteKeywordBtn">
                                    <button class="btn btn-danger" type="button" value="${kw.id}">
                                        <span class="glyphicon glyphicon-remove">删除</span>
                                    </button>
                                </a>
                            </td>
                        </tr>
                    </c:forEach>
                    <c:if test="${not empty deleteKeywordMessage}">
                        <script>
                            $(function () {
                                layer.msg('${deleteKeywordMessage}', {
                                time: 500
                                });
                            })
                        </script>
                    </c:if>
                    </tbody>
                </table>
                <div class="bottom">
                    <footer>
                        <ul class="pagination">
                            <li><a href="<%=basePath%>/admin/keyword?pn=1">首页</a></li>
                            <li><a href="<%=basePath%>/admin/keyword?pn=${pn-1==0?1:pn-1}"><<</a></li>
                            <li><a href="<%=basePath%>/admin/keyword?pn=${pn}">${pn}</a></li>
                            <li><a href="<%=basePath%>/admin/keyword?pn=${pn+1>pages?pn:pn+1}">${pn+1}</a></li>
                            <li><a href="<%=basePath%>/admin/keyword?pn=${pn+2>pages?(pn+1>pages?pn:pn+1):pn+2}">${pn+2}</a></li>
                            <li><a href="<%=basePath%>/admin/keyword?pn=${pn+3>pages?pn:pn+3}">>></a></li>
                            <li><a href="<%=basePath%>/admin/keyword?pn=${pages}">末页</a></li>
                            <li><a>总页数：${pages}</a></li>
                        </ul>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../resources/manager/js/app/base.js"></script>
<script type="text/javascript" src="../resources/manager/js/app/keyword.js"></script>
<script type="text/javascript" src="../resources/manager/js/app/tool.js"></script>
<script type="text/javascript" src="../resources/manager/js/app/fade.js"></script>
<script type="text/javascript" src="../resources/manager/js/app/shareFunction.js"></script>
</html>